<template>
  <div class="search-header-wrapper" v-show="!isFullScreenTable" v-cloak v-if="!reload">
    <div class="search-box compound" :class="{ 'single-line': isSingle }">
      <form class="form-inline">
        <!-- 停车场 -->
        <el-popover
          v-if="isNeedTree"
          class="tree-dropdown"
          placement="bottom"
          width="300"
          popper-class="tree-dropdown-popover"
          trigger="click"
        >
          <table-tree
            :isCheckbox="isCheckbox"
            :isNeedTree="true"
            :paramName="paramName"
            @setSelectedNode="setSelectedNode"
          ></table-tree>
          <el-button class="tree-btn" slot="reference">
            <span class="tree-name">{{ selectedNode ? selectedNode : '请选择停车场' }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
        </el-popover>
        <!-- 区域 -->
        <el-popover
          v-if="isNeedAreaTree"
          class="tree-dropdown"
          placement="bottom"
          width="300"
          popper-class="tree-dropdown-popover"
          trigger="click"
        >
          <area-tree
            :isNeedAreaTree="true"
            :paramNameForAreaTree="paramNameForAreaTree"
            :areaTreeData="areaTreeData"
            :channelTreeData="channelTreeData"
            :selectedAreaNode.sync="selectedAreaNode"
            :reloadAreaTree="reloadAreaTree"
            :reloadChannelTree="reloadChannelTree"
            @setSelectedAreaNode="setSelectedAreaNode"
          ></area-tree>
          <el-button class="tree-btn" slot="reference">
            <span class="tree-name">{{ selectedAreaNode ? selectedAreaNode : '请选择区域' }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
        </el-popover>
        <!-- 通道 -->
        <el-popover
          v-if="isNeedChannelTree"
          class="tree-dropdown"
          placement="bottom"
          width="300"
          popper-class="tree-dropdown-popover"
          trigger="click"
        >
          <channel-tree
            :isNeedChannelTree="true"
            :paramNameForChannelTree.sync="paramNameForChannelTree"
            :channelTreeData="channelTreeData"
            :selectedChannelNode.sync="selectedChannelNode"
            :reloadChannelTree="reloadChannelTree"
            @setSelectedChannelNode="setSelectedChannelNode"
          ></channel-tree>
          <el-button class="tree-btn" slot="reference">
            <span class="tree-name">{{ selectedChannelNode ? selectedChannelNode : '请选择通道' }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
        </el-popover>
        <div class="form-group" v-for="(item, index) in selectionList" :key="index">
          <label class="sr-only" for>{{ item.text }}</label>
          <div class="input-group" v-if="item.type == 'mixedInput'">
            <search-temp :data-obj="item" @handleChange="handleChange"></search-temp>
          </div>
          <div class="input-group" v-else>
            <div class="input-group-addon text-center">{{ item.text }}</div>
            <search-temp :data-obj="item" @handleChange="handleChange"></search-temp>
          </div>
        </div>
      </form>
      <div class="search-btngroup setting-group">
        <a class="ake_btn ake_btn_blue search-btn" @click.prevent="confirmSearch({})">
          <i class="ion-ios-search-strong"></i>
        </a>
        <a class="show-more-trigger" v-if="isCanSwitchStatus" @click="changeHeight(1)">
          <span>多项筛选</span>
          <i class="ion-chevron-down" :class="{ 'ion-chevron-up': !isSingle }"></i>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import searchHeader from "@mixins/tables/searchHeader.js";
import setSearchHeader from "@mixins/tables/setSearchHeader.js";
import SearchTemp from "./SearchTemp";
import TableTree from "./TableTree";
import AreaTree from "./AreaTree";
import ChannelTree from "./ChannelTree";

import invokeTableTree from "@mixins/tables/invokeTableTree.js";
export default {
  mixins: [common, searchHeader, setSearchHeader, invokeTableTree],
  components: {
    SearchTemp,
    TableTree,
    AreaTree,
    ChannelTree
  },
  data() {
    return {
      reload: false
    };
  },
  created() {

  },
  mounted(){
    $('#treeWrapper').mouseleave(function(){
      this.getCheckedParkNodes()
    }.bind(this));
    $('#areaTreeWrapper').mouseleave(function(){
      this.getCheckedAreaNodes()
    }.bind(this));
    $('#channelTreeWrapper').mouseleave(function(){
      this.getCheckedChannelNodes()
    }.bind(this))
  },
  methods: {
    handleChange(item) {
      this.$emit("handleChange", item);
    },
    // 去除标签获取内容
    matchReg(str) {
      let reg = /<\/?.+?\/?>/g;
      return str.replace(reg, "");
    },
    // 获取已选择的停车场节点
    getCheckedParkNodes() {
      let self = this;
      let parkNameArr = [],
        parkIdArr = [],
        parkSysType = "";
      let treeObj = $.fn.zTree.getZTreeObj("tableTree");
      if (!treeObj) {
        return;
      }
      let treeNodes = treeObj.getCheckedNodes(true);
      let nodes = treeNodes.filter(
        item => item.isArea == false && item.childrenNum == 0 && item.parkId
      );
      if (Array.isArray(nodes) && nodes.length) {
        parkSysType = nodes[0].parkSysType;
        nodes.forEach(elem => {
          let name = self.matchReg(elem.name);
          parkNameArr.push(name);
          parkIdArr.push(elem.value);
        });
      } else {
        this.selectedAreaNode = "";
        this.selectedChannelNode = "";
      }
      let searchObj = {};
      searchObj["parkIds"] = parkIdArr.join(",");
      searchObj["name"] = parkNameArr.join(",");
      searchObj["parkSysType"] = parkSysType;
      searchObj["parkIdParamName"] = self.paramName;
      self.getMonthTicketTypeList(searchObj["parkIds"]);
      self.getMonthTicketTypeListForBill(searchObj["parkIds"]);
      self.setSelectedNode(searchObj);
    },
    // 获取已选择的区域节点
    getCheckedAreaNodes() {
      let parkIds = [];
      let areaIds = [];
      let areaNames = [];
      let treeObj = $.fn.zTree.getZTreeObj("areaTableTree");
      if (!treeObj) {
        return;
      }
      let nodes = treeObj.getCheckedNodes(true);
      for (let i = 0; i < nodes.length; i++) {
        if (parkIds.indexOf(nodes[i].parkId) == -1) {
          parkIds.push(nodes[i].parkId);
        }
        areaIds.push(nodes[i].id);
        areaNames.push(nodes[i].name);
      }
      let curPageCache = window.localStorage.getItem(this.curPagePath);
      let _curPageCache = curPageCache ? JSON.parse(curPageCache) : {};
      let channelTreeData = _curPageCache.channelTreeData
        ? JSON.parse(_curPageCache.channelTreeData)
        : [];
      for (let i = 0; i < channelTreeData.length; i++) {
        let itemObj = channelTreeData[i]; //停车场
        // 区域
        let childAreaChannelData =
          itemObj.children && itemObj.children.length ? itemObj.children : [];
        if (parkIds.indexOf(itemObj.parkId) > -1) {
          //找到对应停车场
          for (let j = 0; j < childAreaChannelData.length; j++) {
            if (areaIds.indexOf(childAreaChannelData[j].id) > -1) {
              //找到对应子区域
              //显示该区域
              childAreaChannelData[j].isHidden = false;
            } else {
              // 隐藏该区域
              childAreaChannelData[j].isHidden = true;
            }
          }
        } else {
          childAreaChannelData[0].isHidden = false; //显示根区域节点
          for (let j = 1; j < childAreaChannelData.length; j++) {
            // 隐藏该区域
            childAreaChannelData[j].isHidden = true;
          }
        }
      }
      _curPageCache.channelTreeData = JSON.stringify(channelTreeData);
      window.localStorage.setItem(
        this.curPagePath,
        JSON.stringify(_curPageCache)
      );
      let searchObj = {};
      searchObj[this.paramNameForAreaTree] = areaIds.join(",");
      searchObj["areaNames"] = areaNames.join(",");
      this.setSelectedAreaNode(searchObj);
    },
    // 获取已选择的通道节点
    getCheckedChannelNodes() {
      let channelArr = [];
      let treeObj = $.fn.zTree.getZTreeObj("channelTableTree");
      if (!treeObj) {
        return;
      }
      let nodes = treeObj.getCheckedNodes(true);
      for (let i = 0; i < nodes.length; i++) {
        if (!nodes[i].children) {
          //子节点
          let parentNode = nodes[i].getParentNode();
          let obj = {
            channelId: nodes[i].channelId,
            pid: parentNode.id,
            channelName: nodes[i].name, //通道名
            channelType: nodes[i].entranceType //通道类型
          };
          channelArr.push(obj);
        }
      }
      this.setSelectedChannelNode(channelArr);
    },
    // 获取月票类型页面-月票类型选择下拉框
    getMonthTicketTypeList(parkIds) {
      let self = this;
      let curPagePath = this.$route.path;
      if (curPagePath == "/month_ticket/manage") {
        //月票类型-月票类型名称下拉选项
        let params = {};
        if (parkIds) {
          params.parkIds = parkIds;
        }
        API.fetchGet(
          "/commonFun/monthticket/findConfigNameList.do",
          params
        ).then(
          res => {
            let data = res.data ? res.data : [];
            let ticketNameList = [];
            ticketNameList.push({ name: "--全部--", value: "" });
            for (let i = 0; i < data.length; i++) {
              ticketNameList.push({
                name: data[i],
                value: data[i]
              });
            }
            self.selectionList[0].value = "";
            self.selectionList[0].options = ticketNameList;
            self.selectionList.push({});
            self.selectionList.pop();
          },
          err => {}
        );
      }
    },
    // 获取开通月票-月票类型选择下拉框
    getMonthTicketTypeListForBill(parkIds) {
      let self = this;
      let curPagePath = this.$route.path;
      if (curPagePath == "/month_ticket/bill") {
        //月票类型-月票类型名称下拉选项
        let params = {};
        if (parkIds) {
          params.parkIds = parkIds;
        }
        API.fetchGet(
          "/commonFun/monthticket/findConfigNameList.do",
          params
        ).then(
          res => {
            let data = res.data ? res.data : [];
            let ticketNameList = [];
            ticketNameList.push({ name: "--全部--", value: "" });
            for (let i = 0; i < data.length; i++) {
              ticketNameList.push({
                name: data[i],
                value: data[i]
              });
            }
            self.selectionList[1].value = "";
            self.selectionList[1].options = ticketNameList;
            self.selectionList.push({});
            self.selectionList.pop();
          },
          err => {}
        );
      }
    }
  }
};
</script>

<style lang="less">
@import "../../assets/less/base/variables.less";
@import "../../assets/less/base/form.less";
@import "../../assets/less/base/button.less";

.tree-dropdown-popover {
  &.el-popper {
    margin-top: 5px;
    padding: 0;

    &[x-placement^="bottom"] .popper__arrow {
      border-bottom-color: #f1f1f1;

      &::after {
        border-bottom-color: #f1f1f1;
      }
    }
  }
}

.ml10 {
  margin-left: 10px;
}

.search-header-wrapper {
  padding-bottom: 4px;
  transition: all 0.3s ease;

  .search-box {
    padding: @spacing @spacing*2 0px;
    display: flex;
    justify-content: space-between;
    transition: all 0.3s ease;

    &.single-line {
      .form-inline {
        height: 38px;
        overflow: hidden;
      }
    }
  }

  .show-more-trigger {
    display: inline-block;
    height: @inputH;
    line-height: @inputH;
    color: @blue;
    font-size: @baseFontSize;
    letter-spacing: 1px;
    margin-left: 16px;
    cursor: pointer;

    &:hover {
      color: @mainBg;
    }

    i {
      margin-right: 4px;
    }
  }
}

.search-header-wrapper {
  .search-box {
    &.single {
      .search-btngroup {
        align-self: flex-start;
      }
    }

    .form-inline {
      flex: 1;
      padding-right: 20px;
    }

    .tree-dropdown {
      display: inline-block;
      vertical-align: top;
    }

    .tree-btn {
      width: 130px;
      max-width: 160px;
      height: 32px;
      line-height: 32px;
      padding: 0 10px;
      margin-right: 8px;
      margin-bottom: 8px;
      border-color: @greycc;
      background-color: @whiteGrey;

      > span {
        display: flex;
        align-items: center;
      }

      .tree-name {
        display: inline-block;
        width: 120px;
        max-width: 120px;
        margin-right: 5px;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }

    .form-group {
      margin-bottom: @spacing;
      margin-right: 10px;

      .single-search-wrapper {
        font-size: 0;
        overflow: hidden;

        .input-group-addon {
          display: inline-block;
          padding: 0px;
          height: @inputH;
          vertical-align: top;

          .single-list {
            width: auto;
            border: none;
            // height: 28px;
            // padding: 0px 8px;
            padding: 0;
            color: @lightBlack;
            background-color: @greyee;

            input {
              border-top-right-radius: 0px;
              border-bottom-right-radius: 0px;
              border: 0;
              height: 28px;
              line-height: 28px;
            }
          }
        }

        .selected-region {
          padding: 0;
          margin: 0;
        }
      }

      .form-control {
        width: 120px;
        min-width: 120px;
        padding: 0px 10px;
      }

      &.search-group {
        vertical-align: top;
      }
    }
  }

  .search-btngroup {
    align-self: flex-end;
    margin-bottom: 8px;

    .switch-search-pattern {
      padding-left: 14px;
      padding-right: 14px;
      font-size: 15px;
      margin-left: 10px;

      i {
        font-size: 17px;
        margin-right: 4px;
      }
    }
  }

  .search-btn {
    i {
      display: inline-block;
      color: #fff;
      font-size: 24px;
      width: 24px;
      height: 24px;
      margin-top: 2px;
    }
  }

  .more-filters {
    display: block;
    perspective-origin: 0 50%;
    transition: transform 0.3s ease;
  }

  .single-search-wrapper {
    .selected-region {
      display: inline-block;
      width: auto;
      height: auto;

      .form-control {
        .border-right-radius(4px);
      }
    }
  }

  .input-group {
    .form-input {
      min-width: 120px;
      width: 150px;

      .el-select {
        width: 100%;
      }

      &.el-date-editor,
      input {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
      }
    }

    .el-input--prefix .el-input__inner {
      padding-left: 35px;
    }
  }

  .setting-group {
    position: relative;

    .ake_font_btn {
      font-size: 18px;
    }
  }

  .search-setting-box {
    position: absolute;
    top: 38px;
    right: -16px;
    width: 220px;
    max-height: 340px;
    background-color: rgba(51, 51, 51, 0.9);
    color: #fff;
    font-size: 13px;
    border-radius: 6px;
    transform-origin: 88% -10px;
    z-index: 2200;

    .setting-scroll-box {
      width: 100%;
      max-height: 340px;
      overflow-y: scroll;
    }

    &::after {
      content: "";
      position: absolute;
      top: -10px;
      right: 22px;
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-width: 0 6px 10px;
      border-bottom-color: rgba(51, 51, 51, 0.9);
    }

    ul {
      width: 100%;
      padding: 0px 10px 0px 15px;
      -webkit-user-select: none;
      user-select: none;

      li {
        height: auto;
        line-height: 24px;
        margin-top: 12px;

        &:not(.has-second-stage) {
          height: 24px;
        }

        .second-header {
          padding-bottom: 0px;

          li {
            height: 24px;
            padding-bottom: 0px;
          }
        }

        .operation-item {
          font-size: 14px;
          font-weight: 700;
          cursor: pointer;
          vertical-align: bottom;
        }

        .operate-btn-box {
          vertical-align: baseline;
        }

        &.not-all {
          &:last-child {
            border-bottom: 1px dashed #fff;
          }
        }

        &:last-child {
          height: 24px + @spacing * 2;
          padding-bottom: @spacing;
        }

        &.has-second-stage {
          &:last-child {
            height: auto;
            padding-bottom: @spacing * 2;
          }
        }
      }

      + ul {
        li {
          &:last-child {
            border-bottom: 0;
            margin-bottom: 15px;
            padding-bottom: 0px;
            height: 24px;
          }
        }
      }
    }
  }
}
</style>
